<script setup lang="ts">
import { PropType } from 'vue';
import { ChatMessageData } from 'common';

defineProps({
  message:{
    type: Object as PropType<ChatMessageData>,
    default:{
      sendByMe:false
    }
  },
  showName:{
    type:Boolean,
    default:false
  },
  vip:{
    type:Number,
    default:0
  }
})
</script>

<template>
<div class="chat-message" :class="{right:message.sendByMe}">
  <v-avatar size="36" :image="message.avatar" rounded="0"></v-avatar>
    <div class="message" :class="{'show-name':showName && !message.sendByMe}">
      <div class="name" v-if="showName && !message.sendByMe" :class="{vip:vip}">{{message.name}}</div>
      <div class="message-body" v-html="message.message"></div>
    </div>
</div>
</template>

<style scoped lang="scss">
.chat-message{
  display: flex;
  align-items: start;
  gap: 20px;
  margin-top: 10px;
  width: 100%;
  .message{
    padding: 10px;
    background: white;
    position: relative;
    border-radius: 3px;
    max-width: 70%;

    .name{
      position: absolute;
      right: 0;
      top: -20px;
      font-size: 12px;
      white-space: nowrap;
      &:after{
        all:unset;
      }
    }
    .vip{
      color: red;
    }
    .message-body{
      white-space: pre-wrap;
      word-break: break-word;
    }
  }
  .show-name{
    margin-top: 20px;
  }
}
.chat-message:not(.right){
  .message{
    .name{
      left: 0;
      right: unset;
      &:after{
        all:unset;
      }
    }
    ::after{
      content:' ';
      width:0;
      height:0;
      border-top:5px solid transparent;
      border-bottom:5px solid transparent;
      border-right:5px solid white;
      position: absolute;
      right: 100%;
      top: 6px;

    }
  }
}

.right{
  flex-direction: row-reverse;
  .message{

    background: #98E165;
    &::after{
      content:' ';
      width:0;
      height:0;
      border-top:5px solid transparent;
      border-bottom:5px solid transparent;
      border-left:5px solid #98E165;
      position: absolute;
      left: 100%;
      top: 6px;

    }
  }
}
</style>